<template>
  <main>
    <div class="banner">
      <img :src="dydl1.bgImg" alt="" class="banner">
      <span class="dydl">{{dydl1.title}}</span>
      <span class="fh1"
        >{{dydl1.subtitle}}</span
      >
    </div>
    <div class="bg2">
      <div v-html="dydlxqy1" class="dydlxqy1"></div>
    </div>
    
    
    <Header></Header>
    <Footer></Footer>
  </main>
</template>

<script>
import { getDydl,getDydlxqy } from "@/api/wslapi/";
import Header from "@/components/Header.vue";
// 引入底部组件
import Footer from "@/components/Footer.vue";
export default {
  created () {
    this.dydl()
    this.dydlxqy()
  },
  data () {
    return {
      dydl1:[],
      dydlxqy1:[],
    }
  },
  methods:{
    dydl() {
      getDydl().then((res) => {
        this.dydl1 = res.data.data;
        console.log(res.data.data);
      });
    },
    dydlxqy() {
      getDydlxqy().then((res) => {
        this.dydlxqy1 = res.data.content;
        console.log(res.data.content);
      });
    },
  },
  components: {
    Header,
    Footer,
  },
};
</script>

<style lang="scss" scoped>

* {
  margin: 0 !important;
  padding: 0 !important;
}
.banner {
  height: 590px;
  width: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  img[lazy="loading"] {
    width: 200px;
    height: 200px;
  }
  // 实际图片大小
  img[lazy="loaded"] {
    height: 600px;
    width: 100%;
  }
  .bannerr {
    height: 590px;
    width: 100%;
  }
  .dydl {
    min-width: 206px;
    height: 67px;
    font-size: 48px;
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 230px;
    left: 361px;
    text-align: left;
  }
  .fh1 {
    width: 706px;
    height: 66px;
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 321px;
    left: 361px;
    text-align: left;
  }
}
.bg2 {
  height: 2800px;
  position: relative;
  left: 80px;
  text-align: center;
  display: flex;
  justify-content: center;
  .dydlxqy1{
    margin-left: 200px !important;
  }
  .fays {
    min-width: 165px;
    height: 56px;
    font-size: 40px;
    font-weight: 500;
    color: #333333;
    position: absolute;
    text-align: left;
    top: 80px;
    left: 878px;
  }
  .box1 {
    min-width: 585px;
    height: 150px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 0px 0px 6px 6px;
    position: absolute;
    top: 196px;
    left: 360px;
    .icon1 {
      min-width: 64px;
      height: 64px;
      position: absolute;
      left: 48px;
      top: 43px;
    }
    .xz1 {
      min-width: 63px;
      height: 28px;
      font-size: 20px;
      font-weight: 500;
      color: #333333;
      position: absolute;
      top: 43px;
      left: 136px;
    }
    .fh2 {
      width: 395px;
      height: 40px;
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      position: absolute;
      top: 87px;
      left: 136px;
      text-align: left;
    }
  }
  .box2 {
    min-width: 585px;
    height: 150px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 0px 0px 6px 6px;
    position: absolute;
    top: 196px;
    left: 975px;
    .icon2 {
      min-width: 64px;
      height: 64px;
      position: absolute;
      left: 48px;
      top: 43px;
    }
    .xz2 {
      min-width: 63px;
      height: 28px;
      font-size: 20px;
      font-weight: 500;
      color: #333333;
      position: absolute;
      top: 43px;
      left: 136px;
    }
    .fh3 {
      width: 395px;
      height: 40px;
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      position: absolute;
      top: 87px;
      left: 136px;
      text-align: left;
    }
  }
  .box3 {
    min-width: 585px;
    height: 150px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 0px 0px 6px 6px;
    position: absolute;
    top: 376px;
    left: 360px;
    .icon3 {
      min-width: 64px;
      height: 64px;
      position: absolute;
      left: 48px;
      top: 43px;
    }
    .xz3 {
      min-width: 63px;
      height: 28px;
      font-size: 20px;
      font-weight: 500;
      color: #333333;
      position: absolute;
      top: 43px;
      left: 136px;
    }
    .fh4 {
      width: 395px;
      height: 40px;
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      position: absolute;
      top: 87px;
      left: 136px;
      text-align: left;
    }
  }
  .box4 {
    min-width: 585px;
    height: 150px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 0px 0px 6px 6px;
    position: absolute;
    top: 376px;
    left: 975px;
    .icon4 {
      min-width: 64px;
      height: 64px;
      position: absolute;
      left: 48px;
      top: 43px;
    }
    .xz4 {
      min-width: 63px;
      height: 28px;
      font-size: 20px;
      font-weight: 500;
      color: #333333;
      position: absolute;
      top: 43px;
      left: 136px;
    }
    .fh5 {
      width: 395px;
      height: 40px;
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      position: absolute;
      top: 87px;
      left: 136px;
      text-align: left;
    }
  }
  .box5 {
    min-width: 585px;
    height: 150px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 0px 0px 6px 6px;
    position: absolute;
    top: 556px;
    left: 360px;
    .icon5 {
      min-width: 64px;
      height: 64px;
      position: absolute;
      left: 48px;
      top: 43px;
    }
    .xz5 {
      min-width: 63px;
      height: 28px;
      font-size: 20px;
      font-weight: 500;
      color: #333333;
      position: absolute;
      top: 43px;
      left: 136px;
    }
    .fh6 {
      width: 395px;
      height: 40px;
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      position: absolute;
      top: 87px;
      left: 136px;
      text-align: left;
    }
  }
  .box6 {
    min-width: 585px;
    height: 150px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 0px 0px 6px 6px;
    position: absolute;
    top: 556px;
    left: 975px;
    .icon6 {
      min-width: 64px;
      height: 64px;
      position: absolute;
      left: 48px;
      top: 43px;
    }
    .xz6 {
      min-width: 63px;
      height: 28px;
      font-size: 20px;
      font-weight: 500;
      color: #333333;
      position: absolute;
      top: 43px;
      left: 136px;
    }
    .fh7 {
      width: 395px;
      height: 40px;
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      position: absolute;
      top: 87px;
      left: 136px;
      text-align: left;
    }
  }
}
.bg3 {
  height: 1007px;
  background: #f6f8fb;
  position: relative;
  .h1 {
    min-width: 330px;
    height: 56px;
    font-size: 40px;
    font-weight: 500;
    color: #333333;
    position: absolute;
    text-align: left;
    top: 80px;
    left: 796px;
  }
  .img11 {
    width: 1200px;
    height: 357px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 196px;
    left: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    img[lazy="loading"] {
      width: 200px;
      height: 200px;
    }
    // 实际图片大小
    img[lazy="loaded"] {
      height: 357px;
      width: 100%;
    }
    .img1 {
      height: 357px;
    }
  }
  .img22 {
    width: 1200px;
    height: 324px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 583px;
    left: 360px;
    display: flex;
  align-items: center;
  justify-content: center;
  img[lazy="loading"] {
    width: 200px;
    height: 200px;
  }
  // 实际图片大小
  img[lazy="loaded"] {
    height: 324px;
    width: 100%;
  }
    .img2 {
      height: 324px;
    }
  }
}
.bg4 {
  height: 675px;
  position: relative;
  .img3 {
    min-width: 380px;
    height: 379px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 196px;
    left: 360px;
  }
  .img4 {
    min-width: 380px;
    height: 379px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 196px;
    left: 770px;
  }
  .img5 {
    min-width: 380px;
    height: 379px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 196px;
    left: 1180px;
  }
}
</style>
